<script type="text/javascript" src="${request.contextPath}/backstage_res/ueditor/ueditor.all.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${request.contextPath}/backstage_res/ueditor/ueditor.config.js" charset="utf-8"></script>
<div>
	<form method="post" id="form_${action_id}" name="form_${action_id}">
	<input type="hidden" name="entity.id" value="${entity.id?default('')}">
	<input type="hidden" name="entity.classifyId" value="${entity.classifyId}">
	<input type="hidden" name="entity.state" value="${entity.state}">
	<input type="hidden" name="entity.sell" value="${entity.sell}">
	<input type="hidden" name="entity.stock" value="${entity.stock}">
	<input type="hidden" name="entity.click" value="${entity.click}">
	<input type="hidden" name="entity.marketTime" value="${entity.marketTime?default('')}">
	<input type="hidden" name="entity.marketEnable" value="${entity.marketEnable}">
	<div class="easyui-tabs" style="width:auto;height:auto">
		<div title="基本信息" style="padding:10px">
			<table class="form-table" cellpadding=3>
		    	<tr>
		            <td>${action.getDatagridTitle('name')}:</td>
		            <td><input id="entity.name" name="entity.name" value="${entity.name?default('')}" type="text" style="width: 300px;"  class="easyui-validatebox" data-options="required:true,validType:'length[1,64]'"   /></td>
		        </tr>
		        <tr>	
					<td>${action.getDatagridTitle('serial')}：</td>
					<td><input id="entity.serial" name="entity.serial" value="${entity.serial?default('')}" type="text" style="width: 300px;"  class="easyui-validatebox" data-options="required:true,validType:'length[1,58]'"   /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('guidePrice')}：</td>
					<td><input id="entity.guidePrice" name="entity.guidePrice" value="${entity.guidePrice?c}" type="text" style="width: 300px;"  class="easyui-number" data-options="required:true,precision:2,min:0,max:99999999" /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('price')}：</td>
					<td><input id="entity.price" name="entity.price" value="${entity.price?c}" type="text" style="width: 300px;"  class="easyui-number" data-options="required:true,precision:2,min:0,max:99999999" /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('floorReferencePrice')}：</td>
					<td><input id="entity.floorReferencePrice" name="entity.floorReferencePrice" value="${entity.floorReferencePrice?c}" type="text" style="width: 300px;"  class="easyui-number" data-options="required:true,precision:2,min:0,max:99999999" /></td>
				</tr>
		    </table>
		</div>
		<div title="颜色选择" style="padding:10px" id="color_${action_id}">
			<table class="form-table" cellpadding=3>
				<tr>
					<ul style="clear:both; margin-bottom:10px; list-style:none;" class="Father_Title" >
						<#list colors as color>
						<li style="float: left;">
						<label><input type="checkbox" name="_product_specifications_1_${color.id}" <#if entity.getSpecifications(color.id)!=''>checked</#if> style="position:relative; top:2px; margin-right:5px;" value="${color.id}" />${color.value}<span class="li_empty"> </span></label>
						</li>
						</#list>
	    			</ul>
	    		</tr>
			</table>
		</div>
		<div title="参数维护" style="padding:10px" id="color_${action_id}">
			<table class="form-table" cellpadding=3>
				<#list parameters as parameter>
	    			<tr>
	    				<td>${parameter.value}:</td>
			        	<td>
			        		<input name="_product_specifications_3_${parameter.id}" value="${entity.getSpecifications(parameter.id)?default('')}" class="easyui-validatebox" data-options="validType:'length[1,64]'" style="width:300px;" ></input>
			        	</td>
	    			</tr>
	    		</#list>
			</table>
		</div>
		<div title="相册" style="padding:10px" id="photo_album_${action_id}">
			<table class="form-table" cellpadding=3>
				<input type="file" id="image_icon_${action_id}" name="uploadify" style="display: none" />
				<tr id="photo_album_tr_1_${action_id}">
					
				</tr>
				<tr id="photo_album_tr_2_${action_id}">
					<td align="left" style="padding-left:25px;" id="photo_album_tr_2_td_${action_id}">
						
					</td>
				</tr>
			</table>
		</div>
		
		<div title="详情" style="padding:10px" id="color_${action_id}">
			<table class="form-table" cellpadding=3>
				<tr>
					<textarea id="ueditor_${action_id}" name="entity.content" style="height:300px;width:600px;resize: none;" >${entity.content?default('')}</textarea>
		            </td>
		        </tr>
			</table>
		</div>
	</div>
	</form>
</div>

<script type="text/javascript">
	$(function(){
		getImageInfo("${entity.id?default('')}");
		uploadify();
	});
	//实例化编辑器
    var ue = UE.getEditor('ueditor_${action_id}',{
		<#if toolbars??>
		toolbars:[[${toolbars}]],
		</#if>
		imageUrl:"${request.contextPath}${namespace}/mp/product/product-upload.json",//图片上传提交地址
	    imagePath:"${downloadUrl?default('')}",
	    imageManagerUrl:"${request.contextPath}${namespace}/mp/product/product-imageManager.json",
	    imageManagerPath:"${downloadUrl?default('')}"
    });
	function getImageInfo(id){
		$.ajax({
				url : '${request.contextPath}${namespace?default('')}/mp/product/product-getProductImageDto.json',
				data : {
					id : id
				},
				dataType : 'JSON',
				success : function(json) {
					if(json.suc==1){
						if(json.dto.images.length==0){
							append_tr_1("",1)
						}else{
							append_tr_1(json.dto.images[0].icon,1)
						}
						$("#photo_album_tr_1_${action_id}").append(s);
						var s = ""; 
						$("#photo_album_tr_2_td_${action_id}").empty();
						if(json.dto.images.length > 0){
							for(var i=0 ; i<json.dto.images.length;i++){
								append_tr_2(json.dto.images[i].icon,json.dto.images[i].id);
							}
							selectClass(0);
						}
					}else if(json.suc==0){
						append_tr_1("",1);
					}
				}
			});
	}
	
	function addImage(){
		$('#image_icon_${action_id}').click();
	}
	
	function uploadify(){
		$("#image_icon_${action_id}").uploadify({
			'swf' : '${request.contextPath}/backstage_res/easyui/js/uploadify/uploadify.swf', //指定上传控件的主体文件，默认‘uploader.swf’ 
	        'uploader' : '${request.contextPath}${namespace}/mp/product/product-upload.json',       //指定服务器端上传处理文件，默认‘upload’ 
	        'folder' : '', //要上传到的服务器路径，默认‘/’
	        'fileObjName'   : '${dirUrl}', //暂时作为路径
	        'buttonText' : '添加图片',
	        'auto' : true,
	        'multi' : false,  //是否允许同时上传多文件，默认false 
	        'fileTypeDesc' : '请选择图片文件（不能超过3M）', //出现在上传对话框中的文件类型描述 
	        'fileTypeExts' : '*.jpg;*.bmp;*.png;*.gif',      //控制可上传文件的扩展名，启用本项时需同时声明fileDesc 
	     	'fileSizeLimit' : 3*1024*1024, //3M
	     	'overrideEvents' : ['onUploadSuccess'],
	     	'onUploadSuccess' : function(file, data, response){
	     		eval("data="+data);
	     		append_tr_1(data.url,1);
	     		append_tr_2(data.url,"");
	     	}
		});
			
	}
	
	function append_tr_1(str,type){
		$("#photo_album_tr_1_${action_id}").empty();
		var s = ""; 
		if(str==""){
			s = '<td>'+
					'<div class="productImgPrivew">'+
						'<p style="margin-top:100px;">此处显示商品页默认图片<br/>您还未上传商品图片</p>'+
					'</div>'+
				'</td>';
		}else{
			if(type==2){
				s = '<td>'+
						'<div class="productImgPrivew">'+
							'<img src="'+str+'" width:"200" height="180" border="0">'+
						'</div>'+
					'</td>';
			}else{
				s = '<td>'+
						'<div class="productImgPrivew">'+
							'<img src="${downloadUrl}'+str+'" width:"200" height="180" border="0">'+
						'</div>'+
					'</td>';
			}
		}
		$("#photo_album_tr_1_${action_id}").append(s);
	}
	
	function append_tr_2(str,id){
		var s = '<div class="productProgressContainer">'+
					'<div class="productProWrapper">'+
						'<a><img src="${downloadUrl}'+str+'" width:"50px" height="50px" border="0" class="productProWrapper_a" onClick="selectImage(this)"></a>';
			if(id){
				s+='<input type="hidden" value="'+str+'">';
			}else{
				s+='<input type="hidden" name="picnames" value="'+str+'">';
			}
			s+='</div>'+
					'<div>'+
						'<a href="javascript:;" class="productDeleteBth" onClick="removeImage(this,'+id+')">&nbsp;</a>'
					'</div>'+
				'</div>';
		$("#photo_album_tr_2_td_${action_id}").append(s);
	}
	
	function selectImage(obj){
		var index = $(".productProWrapper_a").index($(obj));
		append_tr_1($(".productProWrapper_a")[index].src,2);
		selectClass(index);
	}
	
	function removeImage(obj,id){
		if(id){
			$.messager.confirm('', '是否删除图片，删除图片将立即删除后台图片', function(b) {
				if (b) {
					var index = $(".productDeleteBth").index($(obj));
					$(".productProgressContainer").eq(index).remove();
					var len = $(".productProgressContainer").length;
					if(len==0){
						append_tr_1("");
					}else{
						if(index==0){
							index = len - 1;
							append_tr_1($(".productProWrapper_a")[index].src,2);
						}else{
							index = index - 1;
							append_tr_1($(".productProWrapper_a")[index].src,2);
						}
					}
					selectClass(index);
					deleteImage(id);
				}
			});
		}else{
			var index = $(".productDeleteBth").index($(obj));
			$(".productProgressContainer").eq(index).remove();
			var len = $(".productProgressContainer").length;
			if(len==0){
				append_tr_1("");
			}else{
				if(index==0){
					index = len - 1;
					append_tr_1($(".productProWrapper_a")[index].src,2);
				}else{
					index = index - 1;
					append_tr_1($(".productProWrapper_a")[index].src,2);
				}
			}
			selectClass(index);
		}
	}
	
	function selectClass(index){
		$(".productProWrapper").removeClass('productImageSelected');
		$(".productProWrapper").eq(index).addClass('productImageSelected');
	}
	
	function deleteImage(id){
		$.ajax({
				url : '${request.contextPath}${namespace?default('')}/mp/product/product-deleteImage.json',
				data : {
					id : id
				},
				dataType : 'JSON',
				success : function(json) {
					$.messager.alert(json.title,json.msg,json.level);
					if(json.level!='error'){
						$("#datagrid_${action_id}").datagrid('reload');
					}
				}
			});
	}
</script>
